<template>
	<div class="swipercontainer">
	<div class="swiperbox">
		<swiper :options="swiperOption">
			<swiper-slide v-for="item of list":key="item.id">
					<img class="swiperImg" :src="item.imgUrl" />

			</swiper-slide>

		<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
	</div>
</template>

<script>
 import { swiper } from 'vue-awesome-swiper'
export default{
    props:{
    	list:Array
    },
    data (){
    	return{
    		swiperOption:{
    			pagination:{
    				el:'.swiper-pagination',
    		        loop:true,
                     speed: 400,
                     direction: 'horizontal',
                      paginationClickable: true,
                       mousewheelControl: true,
                       autoplay:1000,
                        autoplayDisableOnInteraction: false

    			}

    	}
    }
    }
}
</script>

<style lang="stylus" scoped>
 .swiper-container {
    width: 100%
    height: 2.3rem
    .swiperbox {
      width: 100%
      height: 100%
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 100%
      height: 100%
      .swiperImg {
        width: 100%
        height: 100%
      }

    }
  }
 

/*此处有个BUG待修复,没有露白的那个东西*/
</style>